<!-- 上传文件和详情 -->
<template>
  <div class="app-container">
    <Edialog
      :outershow="outershow"
      :title="title"
      @saveFn="saveFn"
      @close="closeFn"
      :saveClick="true"
      :width="'60%'"
    >
      <el-form inline ref="form" :model="form">
        <el-form-item label="文件上传" prop="name" style="width: 100%">
          <!-- <el-input v-model="form.name" /> -->
          <input
            type="file"
            class="choose"
            @change="loadExcelFile"
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
          />
        </el-form-item>
        <el-form-item label="表头所在行" prop="name" style="width: 48%">
          <el-input v-model="form.name"> </el-input>
        </el-form-item>
        <el-form-item label="表头所在列" prop="name" style="width: 48%">
          <el-input v-model="form.name" style="width: 90%" />
          <el-tooltip
            class="item"
            effect="dark"
            content="多行时用“,”隔开,比如'B,C'"
            placement="top"
          >
            <i style="margin-left: 10px" class="el-icon-question"></i>
          </el-tooltip>
        </el-form-item>
      </el-form>
      <SpreadSheet
        style="height: 50vh; width: 100%"
        ref="Sheet"
        SheetName="Sheet1"
        :File="file"
        :Headers="headers"
        :ColumnWidth="200"
        :Records="records"
      ></SpreadSheet>
    </Edialog>
  </div>
</template>

<script>
import SpreadSheet from "@/components/Xspreadsheet/SpreadSheet.vue";
import Edialog from "@/components/Edialog";
// import { addTemplate, editTemplate } from "@/api/templateManage";
export default {
  data() {
    return {
      templateType: [
        {
          value: "1",
          label: "类型1",
        },
        {
          value: "2",
          label: "类型2",
        },
      ],
      outershow: false,
      title: "上传文件",
      form: {
        name: "",
        type: "",
        remark: "",
      },
      file: null,
      ColumnCount: 30,
      RowCount: 100,
      headers: [],
      records: [],
    };
  },
  components: {
    Edialog,
    SpreadSheet,
  },
  methods: {
    loadExcelFile(e) {
      console.log("loadExcelFile", e.target.files[0]);
      this.file = e.target.files[0];
    },
    //外部打开弹窗
    openFn(type) {
      if (type === "detail") {
        this.title = "详情";
      } else if (type === "upload") {
        this.title = "上传文件";
      }
      this.outershow = true;
      this.$nextTick(() => {
        this.$refs.form.resetFields();
      });
    },
    saveFn() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.$route.query.id) {
            editTemplate(this.form).then((res) => {
              if (res.code === 200) {
                this.$message.success("修改成功");
              }
            });
          } else {
            addTemplate(this.form).then((res) => {
              if (res.code === 200) {
                this.$message.success("新增成功");
              }
            });
          }
        }
      });
    },
    closeFn() {
      this.$refs.form.resetFields();
      this.outershow = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.el-select {
  width: 100%;
}
.el-form-item {
  width: 50%;
}
::v-deep .el-form-item__content {
  width: 80%;
}
.choose::-webkit-file-upload-button {
  color: white;
  display: inline-block;
  background: #409eff;
  border: none;
  padding: 12px 20px;
  width: 100px;
  height: 40px;
  border-radius: 3px;
  white-space: nowrap;
  cursor: pointer;
  font-size: 10pt;
}
</style>
